<template>
  <div class="page-container">
    <div style="width: 100%; height: 100%">
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
// import { Snapline } from "@antv/x6-plugin-snapline";

export default {
  data() {
    return {
      graph: null,
    };
  },
  methods: {
    initGraph() {
      const container = document.getElementById("container");
      this.graph = new Graph({
        container: container,
        // width: container.offsetWidth,
        // height: container.offsetHeight,
        autoResize: true, // 自适应
        panning: true, // 鼠标按下画布后移动时会拖拽画布，
        mousewheel: true, // 滚动鼠标滚轮会缩放画布。
        snapline: true, // 对齐线
        background: {
          color: "#F2F7FA",
        },

        grid: {
          visible: true,
          type: "doubleMesh",
          args: [
            {
              color: "#eee", // 主网格线颜色
              thickness: 1, // 主网格线宽度
            },
            {
              color: "#ddd", // 次网格线颜色
              thickness: 1, // 次网格线宽度
              factor: 4, // 主次网格线间隔
            },
          ],
        },
      });
      // 下面为画布增加对齐线功能，当移动的节点与其他节点对齐时，会自动出现对齐线，可以方便用户进行位置排版。
      //   this.graph.use(
      //     new Snapline({
      //       enabled: true,
      //     })
      //   );
    },
    regesterGraph() {
      Graph.registerNode(
        "custom-node",
        {
          inherit: "rect",
          width: 100,
          height: 40,
          attrs: {
            body: {
              stroke: "#8f8f8f",
              strokeWidth: 1,
              fill: "#fff",
              rx: 6,
              ry: 6,
            },
          },
        },
        true
      );
    },
    showData() {
      const graph = this.graph;
      const source = graph.addNode({
        shape: "custom-node",
        x: 40,
        y: 200,
        label: "hello",
      });

      const target = graph.addNode({
        shape: "custom-node",
        x: 300,
        y: 80,
        label: "world",
      });

      // graph.addEdge({
      //   source: {
      //     cell: source,
      //     anchor: {
      //       name: "right",
      //       args: {
      //         dy: -10,
      //       },
      //     },
      //     connectionPoint: "anchor",
      //   },
      //   target: {
      //     cell: target,
      //     anchor: {
      //       name: "left",
      //       args: {
      //         dy: -10,
      //       },
      //     },
      //     connectionPoint: "anchor",
      //   },
      //   attrs: {
      //     line: {
      //       stroke: "#8f8f8f",
      //       strokeWidth: 1,
      //     },
      //   },
      // });

      // graph.addEdge({
      //   source: {
      //     cell: source,
      //     anchor: {
      //       name: "right",
      //     },
      //     connectionPoint: "anchor",
      //   },
      //   target: {
      //     cell: target,
      //     anchor: {
      //       name: "left",
      //     },
      //     connectionPoint: "anchor",
      //   },
      //   attrs: {
      //     line: {
      //       stroke: "#8f8f8f",
      //       strokeWidth: 1,
      //     },
      //   },
      // });

      graph.addEdge({
        source: {
          cell: source,
          anchor: {
            name: "right",
            args: {
              dy: 10,
            },
          },
          connectionPoint: "anchor",
        },
        target: {
          cell: target,
          anchor: {
            name: "left",
            args: {
              dy: 10,
            },
          },
          connectionPoint: "anchor",
        },
        attrs: {
          line: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
          },
        },
      });
      this.graph.centerContent(); // 居中显示
    },
  },
  mounted() {
    this.initGraph();
    this.regesterGraph();
    this.showData();
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  #container {
    width: 800px;
    height: 600px;
  }
}
</style>
